<template>
	<view
		v-if="shoppingCartData.sumNumber"
		:style="{ bottom: `${bottom}px` }"
		class="root fixed width-100percent"
	>
		<view v-if="showCommodities" @click="showList" class="shelter" :style="{ zIndex: 1 }" />
		<view class="bgc-fff br-20 ml-20 mr-20 mb-8" :style="{ zIndex: 2 }">
			<view
				class="bgc-fff br-20"
				:style="{ maxHeight: listHeight, transition: `all 0.3s ease-in-out` }"
			>
				<view class="fd-row jc-sb ml-20 mr-20 mt-36">
					<text class="fs-24">
						<text class="color-999">共计</text>
						<text class="color-fe0b0b">{{ shoppingCartData.sumNumber }}</text>
						<text class="color-999">件商品</text>
					</text>

					<view
						class="fd-row ai-center"
						hover-class="tap-hover"
						hover-stay-time="90"
						@click="clearData"
					>
						<uni-icons type="trash" size="13" color="#d9d9d9" />
						<text class="fs-24 color-d9d9d9 ml-12">清空购物车</text>
					</view>
				</view>

				<scroll-view scroll-y class="mt-30 mb-30 f1 oh">
					<block v-for="(commodity, index) in shoppingCartData.commodities" :key="index">
						<label class="height-24" />
						<view class="fd-row ai-center fs-28 ml-20 mr-20">
							<text class="f2 color-333 mr-12 ellipsis">
								{{ commodity.name }}
							</text>
							<text class="f1 color-fe0b0b fw-600 mr-12">
								￥{{ Number(commodity.price).toFixed(2) }}
							</text>

							<view class="fd-row ai-center">
								<view
									class="reduce br-circle width-48 height-48 ai-center jc-center"
									:style="{
										border: `1px solid #f45455`,
									}"
									hover-class="tap-hover"
									hover-stay-time="100"
									@click="countNumber('reduce', index)"
								/>
								<input
									class="width-60 input text-center fs-30 color-333 fw-600"
									type="number"
									:value="commodity.num"
									:disabled="true"
								/>
								<view
									class="br-circle width-48 height-48"
									:style="{
										display: `flex`,
										alignItems: `center`,
										justifyContent: `center`,
										backgroundImage: `linear-gradient(-22deg, #f4a754, #f45455)`,
									}"
									hover-class="tap-hover"
									hover-stay-time="100"
									@click="countNumber('plus', index)"
								>
									<uni-icons type="plusempty" color="#fff" size="18" />
								</view>
							</view>
						</view>
						<label class="height-24" />
					</block>
				</scroll-view>

				<label class="ml-20 mr-20 bgc-e7e7e7 height-2" />
			</view>

			<view
				class="br-20 fd-row ai-center bgc-fff"
				:style="{
					padding: `20rpx`,
					height: `66px`,
					boxShadow: `0 0 20rpx 0 rgba(255, 180, 180, 0.4)`,
				}"
			>
				<image
					class="width-66 height-66"
					src="/static/img/icon-phone.png"
					mode="aspectFit"
					@click="callPhone"
				/>
				<image
					class="width-66 height-66 ml-26"
					src="/static/img/icon-shoppingCart.png"
					mode="aspectFit"
					@click="showList"
				/>
				<view @click="showList" class="f1 ml-18">
					<text class="color-fe0b0b fs-40 fw-600">
						￥{{ Number(shoppingCartData.sumPrice).toFixed(2) }}
					</text>
					<text class="fs-24">
						<text class="color-999">共计</text>
						<text class="color-fe0b0b">{{ shoppingCartData.sumNumber }}</text>
						<text class="color-999">件商品</text>
					</text>
				</view>

				<button
					class="color-fff bgc-f45455 br-40 fs-32 fw-600 pl-50 pr-50 lh-70"
					hover-class="tap-hover"
					@click="settlement"
				>
					去结算
				</button>
			</view>
		</view>
	</view>
</template>

<script lang="ts">
	import { Vue, Component, Prop } from "vue-property-decorator";
	import uniIcons from "@/components/uni-icons/uni-icons.vue";
	import { Storage } from "@/static/libs/utils";

	@Component({ name: "shoppingCart", components: { uniIcons } })
	export default class ShoppingCart extends Vue {
		// component property
		@Prop({
			default: 0,
			type: [Number, String],
		})
		bottom: number | string;
		showCommodities: boolean = false;

		get listHeight(): string | number {
			return this.showCommodities ? "50vh" : 0;
		}

		get shoppingCartData(): AnyObject {
			return this.$store.state.shoppingCartData;
		}

		countNumber(type: "reduce" | "plus", index: number) {
			uni.showLoading({ title: "Loading..." });
			const { $request, shoppingCartData } = this,
				commodity = shoppingCartData.commodities[index];
			let number = commodity.num;
			switch (type) {
				case "plus":
					number++;
					break;
				case "reduce":
					number--;
					break;
				default:
					break;
			}
			$request
				.get("/shop/editCart", { id: commodity.product_id, num: number })
				.then(({ data }) => {
					number > 0
						? (commodity.num = number)
						: shoppingCartData.commodities.splice(index, 1);

					commodity.price = data.price;
					shoppingCartData.sumNumber = +data.all_num;
					shoppingCartData.sumPrice = +data.all_price;

					uni.hideLoading();
				});
		}
		showList() {
			if (!this.shoppingCartData.sumNumber) return;
			this.showCommodities = !this.showCommodities;
		}
		callPhone() {
			uni.makePhoneCall({ phoneNumber: this.shoppingCartData.phoneNumber });
		}
		clearData() {
			uni.showLoading({ title: "Loading..." });
			this.$request.get("/shop/delShopCar").then(({ msg: title }) => {
				this.$store.commit("setShoppingCartData", {});
				this.showCommodities = false;
				uni.showToast({ title });
			});
		}
		async settlement() {			
			if (!Storage.get("authorizationInfo")?.nickName) {
				const [showFail]: any = await uni.showModal({
					title: "授权用户信息",
					content: "授权后以提供更好的体验",
					showCancel: false,
					confirmText: "授权",
					confirmColor: "#1aad19",
				});
				if (showFail) return;
				const [getFail, getRes]: any = await (<AnyObject>uni).getUserProfile({
					desc: "绑定推荐关系",
				});
				if (getFail) return;
				await this.$request.get("/user/upMsg", getRes.userInfo);
				Storage.set("authorizationInfo", getRes.userInfo);
			}

			uni.navigateTo({ url: "/pages/client/ConfirmOrder" });
		}
	}
</script>

<style lang="scss" scoped>
	// scss
	.reduce::before {
		content: "";
		width: 26rpx;
		height: 4rpx;
		border-radius: 4px;
		background-color: #f45455;
	}
</style>